﻿<html>
<head>
<title>事件处理</title>
<meta charset="utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
</head>
<body>
<input type="button" value="点我" onclick="alert(`点击了本按钮`)"/> <br><br>
<input type="button" value="移上面激活我" onmousemove="alert(`点击了本按钮2`)"/>
<h1>也可以通过函数来调用事件，js要放控件后面</h1>
<input type="button" value="保存按钮" onclick="fage();"/>
<script>
function fage(){
    alert(`你通过函数调用激活了事件`);
}
</script>
<hr>
你可以在form指定ID来运行： <br>
<form id="ab">
<input type="button" id="cd" name="cd" value="保存按钮"/>
</form>
<script>
ab.cd.onclick=function(){
    alert(`2你3通4过5函6数7调8用9激0活了事件`);
}
</script>
<hr>
或者依赖独立的方法 <br>
<input type="button" id="ddk" value="ddk按钮" />
<script>
const b_ddk=document.getElementById(`ddk`);
ddk.onclick=function(){
    document.write(`你好啊，用方法 调用是很好的`);
}
</script>
<hr>
<form name="form1">
用户名：
<input type="text" onFocus="txtfocus()" onBlur="txtblur()">
</form>
<script>
function txtfocus(){
    let e=window.event;
    let obj=e.srcElement;
    obj.style.background="#ff9966";
}
function txtblur(){
    let e=window.event;
    let obj=e.srcElement;
    obj.style.background="#fffff2";
    }
</script>
<hr>
自动点击选中功能 <br>
新闻内容： <br>

<form action="" name="form2">
<textarea name="content" cols="40" rows=6 onfocus="mysel()">逐浪软件代表了中国CMS领域的最高水平...</textarea>
</form>
<div id="fage">
这是父节点，下面还有一个fage2子节点被移除了
<div id="fage2">
    3333
</div>

</div>
<script>
function mysel(){
    document.form2.content.select();
}

//移除指定ID下的ID
// var parent=document.getElementById("fage");
// var child=document.getElementById("fage2");
// parent.removeChild(child);

//移除特定的ID
var child=document.getElementById("fage2");
child.parentNode.removeChild(child);
</script>
<hr>
检测用户输入内容不合法，给出提示。
<form action="" name="form3">
用户呢称：
<input type="text" name="username" onblur="cheusername(form3)" /><span id="showuser"></span> <br>
注册密码：
<input type="password" name="pwd" onblur="chepwd(form3)" /><span id="showpwd"></span> <br>
确认密码：
<input type="password" name="pwd2" onblur="chepwd2(form3)"/><span id="showpwd2"></span> <br>
<input type="button" value="注册" /> <input type="reset" value="重写" />
</form>
<script>
function cheusername(form){
    let username=form.username.value;
    if (username==``) {
        showuser.innerHTML=`用户名不能为空!`;
        return false;
    }else if (username.length>6) {
        showuser.innerHTML=`用户名不能超过6位！`;
        return false;
    }else{
        showuser.innerHTML=`用户名符合要求!`;
    }
    return true;
};
function chepwd(form){
    let pwd=form.pwd.value;
    if (pwd==``) {
        showpwd.innerHTML=`密码不能为空`;
        return false;
    } else if (pwd.length<3) {
        showpwd.innerHTML=`密码不能小于3位`;
        return false;
    }else{
        showpwd.innerHTML=`密码符合要求`;
    }
    return true;
};
function chepwd2(form){
    let pwd=form.pwd.value;
    let pwd2=form.pwd2.value;
    if (pwd2==``) {
        showpwd2.innerHTML=`密码不能为空`;
        return false;
    } else if (pwd2!=pwd) {
        showpwd2.innerHTML=`两次输入的密码不一致`;
        return false;
    }else{
        showpwd2.innerHTML=`密码符合要求`;
    }
    return true;
};
</script>
<hr>onchange是指当前元素失去焦点，并且元素的内容发生改变时，触发事件处理程序，该事件一般在下拉菜单中使用。 <br>
<form action="" name="form4">
<input type="text" name="textfieee" value="逐浪软件开创全新CMS设计" />
<select name="menu1" id="" onchange="ffcolor()">
<option value="black">黑色</option>
<option value="yellow">黄色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
<option value="red">红色</option>
<option value="purple">紫色</option>
</select>
</form>
<script>
function ffcolor(){
    let e=window.event;  //获取事件对象
    let obj=e.srcElement; //获取发生事件的元素
    form4.textfieee.style.color=obj.value; //设置文本颜色 
    console.log(obj)
}
</script>

<hr>
在表单中，根据选择年份和月份，输出用户的出生年月 <br>
<form action="" name="form5">
出生年月：
<select name="year" id="" onchange="showbirth()">
<option value="">请选择年份：</option>
<script>
    for (let it = 1980; it <= 2020; it++) {
        document.write(`<option value="`+it+`">`+it+`年</option>`);
    }
</script>
</select>
<select name="month" id="" onchange="showbirth()">
<option value="">选择月份</option>
<script>
    for (let i = 0; i <=12; i++) {
        document.write(`<option value="`+i+`">`+i+`月</option>`);
    }
</script>
</select>
</form>
<script>
function showbirth(){
    let year=form5.year.value;
    let month=form5.month.value;
    if (year!=`` && month!=``) {
        alert(`你的出生年月是：`+year+`年`+month+`月`);
    }

}
</script>

<hr>根据下拉菜单输出不同的菜单 <br>
<script>
    function changemenu(num){
        if(num==1){
        document.all.NumID.style.display=``;
        document.all.DataID.style.display=`none`;
    }
    if (num==2) {
        document.all.DataID.style.display=``;
        document.all.NumID.style.display=`none`;
        
    }
    }
    </script>
<form action="" name="form6">
<select name="type" id="type" onchange="changemenu(document.form6.type.value)">
<option value="" selected>选择统计类型</option>
<option value="1">按月统计</option>
<option value="2">按年统计</option>
</select>
<div style="display: none;" id="NumID">
5月 <input type="checkbox" name="checkbox" value="checkbox" checked />
6月 <input type="checkbox" name="checkbox" value="checkbox" />
</div>
<div id="DataID" style="display: none;">
<input name="radiobuttion" type="radio" value="radiobutton" checked>
2016年
<input name="radiobuttion" type="radio" value="radiobutton">
2017年
</div>    
</form>
<h1>表单提交与重置事件</h1>
<form  name="form7" onsubmit="return Allsubmit()" onreset="return dd()">
商品名称：
<input type="text" name="n1" id="n1" /> <br>
市场价格：
<input type="text" name="n2" id="n2" /> <br>
会员价格：
<input type="text" name="n3" id="n3" /> <br>
商品简介：
<textarea name="n4" id="n4" cols="30" rows="10"></textarea> <br>
商品数量：
<input type="text" name="n5" id="n5" /> <br>
<input name="nsub" type="submit" id="ssbu2" value="提交"/>
<input type="reset" name="ssbumit2" value="重置清空" />
</form>
<script>
function Allsubmit(){   //验证消息必填
    let tt1=true;
    let eee=window.event;
    let obj=eee.srcElement;
    for (let is = 1; is <=5; is++) {
        if (eval(`obj.`+`n`+is).value==``) {
            tt1=false;
            break;
        }
    }
    if (!tt1) {
        alert(`提交的信息不允许为空`);
    }
    return tt1;
};
function dd(){
    if (window.confirm(`你想好了清除输入？`)) {
        return true;
    } else
    {
        return false;
    }
}
</script>

<hr>
出租屋信息选择器 <br>
<form action="" name="form8">
地段：
<select name="diduan" id="" onchange="showbirthGG()">
<option value="朝阳区">朝阳区</option>
<option value="朝阳区">东城区</option>
<option value="朝阳区">西城区</option>
<option value="朝阳区">北城区</option>
</select>
<br>
出生年月：
<select name="year" id="" onchange="showbirthGG()">
<option value="">请选择年份：</option>
<script>
    for (let it = 1980; it <= 2020; it++) {
        document.write(`<option value="`+it+`">`+it+`年</option>`);
    }
</script>
</select>
<select name="month" id="" onchange="showbirthGG()">
<option value="">选择月份</option>
<script>
    for (let i = 0; i <=12; i++) {
        document.write(`<option value="`+i+`">`+i+`月</option>`);
    }
</script>
</select>
</form>
<script>
function showbirthGG(){
    let diduan=form8.diduan.value;
    let year=form8.year.value;
    let month=form8.month.value;
    if (year!=`` && month!=``) {
        alert(`你选的地段是：`+diduan+`\n你的出生年月是：`+year+`年`+month+`月`);
    }

}
</script>

<h1>鼠标和键盘事件</h1>
动态改变页面的背景颜色  <br>
<input type="button" name="xx" value="交换背景" onclick="trunclolors()" />
<script>
let anycolor=new Array(`olive`,`teal`,`red`,`blue`,`maroon`,`navy`,`lime`,`fuschia`,`green`,`purple`,`gray`,`yellow`,`aqua`,`white`,`silver`);//定义颜色 数组
let 颜色变量=0;
function trunclolors(){
    if (颜色变量==(anycolor.length-1))
    {
        颜色变量=0;
    }    
    颜色变量++;
        document.bgColor=anycolor[颜色变量];
}
</script>

<hr>正在拔号中： <br>
<form name="form9">
<input type="text" name="tel1">
<input type="button" name="submit" value="点击拔号" onclick="bohao()" />
</form>
<script>
function bohao(){
    let tel1=form9.tel1.value;
    if (tel1!=``) {
    alert(`正在拔号中`);
    }else    {
    alert(`请输入电话号码！`);
    }
}
</script>

<hr>输出商品名称和总价 <br>
<form action="" name="fomr10">
商品名称：
<input type="text" value="" name="ss1"/> <br>
商品单价：
<input type="text" name="ss2"/> <br>
商品数量:
<input type="text" name="ss3"> <br>
<input type="button" name="submit" value="结算" onclick="jie()"/>
</form>
<script>
    function jie(){
        let ss1=fomr10.ss1.value;
        let ss2=fomr10.ss2.value;
        let ss3=fomr10.ss3.value;
        let jieg=ss2*ss3;
        if (ss1==``) {
            alert(`请输入商品名称`);
            return false;
        } 
         if(ss2==``){
            alert(`请输入商品价格`);
            return false;
            }
             if(ss3==``){
                alert(`请输入商品数量`);
                return false;
            } else{
        alert(`商品名称：`+ss1+`\n商品总价：`+jieg);
    }
    }
    </script>

<hr>用事件模拟超链接标记的功能 <br>
鼠标按下和松开事件分别是onmousedown和onmosuseup，其中onmousedown事件用于在鼠标按下事的触 发事件处理程序，onmouseup事件则是在鼠标松开时触发事件处理程序。<br>
用鼠标单击对象时，可用这两个事件实现动态效果<br>
<p id="p1" style="color: #aa9900;cursor: pointer;" onmousedown="mosedownit()" onmouseup="mouseup()"><u>零基础学javascript语言</u></p>
<script>
function mosedownit(){
    let obj=document.getElementById(`p1`);
    obj.style.color=`#ccc`;
}
function mouseup(){
    let objj=document.getElementById(`p1`);
    objj.style.color=`#3F17E3`;
}
</script>

<hr>鼠标移上去显示和隐藏 <br>
<div id="我之鼠标动作" onmousedown="y上去()" onmouseup="y离开()" style="width:10rem;height:10rem;background:#aa9900">这里是第一层</div>
<script>
function y上去(){
    let y上去=document.getElementById(`我之鼠标动作`);
    y上去.style.display=`none`;
}
function y离开(){
    let y离开=document.getElementById(`我之鼠标动作`);
    y离开.style.display=`block`;
}
</script>

<hr>模拟对讲机功能 <br>
<div id="duij">请讲话……</div>
<input type="button" name="dujij2" value="按住 说话" onmousedown="发信号()" onmouseup="关信号()" />
<script>
function 发信号(){
    let 发信息号=document.getElementById(`duij`);
    发信息号.innerHTML=(`长江长江，我是黄河`);
} 
function 关信号() {
    let 关信号=document.getElementById(`duij`);
    关信号.innerHTML=(`通话完毕`);
}  
</script>

<h1>鼠标移入和移出事件，即onmouseover和onmouseout事件</h1>
<div id=heik onmouseover="visible(this,1)" onmouseout="visible(this,0)" style="background:#000;width: 10rem;height: 10rem;color: #fff;">黑块在这，鼠标移上来变透明</div>

<li id="cd1" onmouseover="cdshow()" onmouseout="cdhidden()">父菜单
<ul id="cd2" style="display: none;">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
<li>子菜单4</li>
</ul>
</li>

<div id="文字来" onmouseover="文字来一下()" onmouseover="文字复原()">逐浪软件中国第一的CMS</div>
<script>
function visible(cursor,i) { //图片透明
    if (i==0) {
        cursor.style.opacity=1;
    } else {
        cursor.style.opacity=0.5;
    }
}
function cdshow(){   //菜单展示
let cdshow=document.getElementById(`cd2`);
cdshow.style.display=`block`;
}
function 文字来一下() {
    let 文字来一下=document.getElementById(`文字来`);
    文字来一下.style.fontSize=`28px`;
    文字来一下.style.color=`#f00`;
    
}
</script>

<hr>
鼠标移动事件，onmousemove，是指鼠标在页面上进行移动时触发的程序，例如在页面中移动时，会在页面中显示鼠标的当前位置，也就是(x,y)值。 <br>
<div id="positions"></div>
<script>
let x=0,y=0;
function mousePlace() {
    x=window.event.x;
    y=window.event.y;
    document.getElementById(`positions`).innerHTML=`x值：`+x+`y值：`+y;
}
document.onmousemove=mousePlace;
</script>

<hr>实现按下shift+字母A键的新功能  <br/>
<input type="text" />
<script>
function 按A刷新() {
    if( window.event.shiftKey  && window.event.keyCode==65){ //大小写敏感
    location.reload();  //对页面进行刷新
    }
}
document.onkeydown=按A刷新;
</script>

<hr>按答案字母答题： <br>
被称为国球的球类是： <br>
A-篮球<br>
B-足球<br>
C-乒乓球<br>
D-羽毛球
<script>
function 按键答题(){
    let 键之值=window.event.keyCode;
    if (键之值==65) {
        alert(`篮球是美国的运动`);
    } else if(键之值==66){
    alert(`足球是巴西的 运动`);
    } else if(键之值==67){
    alert(`答对了，中国之光！`);
    }else{
        alert(`这也是中国国球-羽毛球`);
    }
}  
document.onkeydown=按键答题;
</script>
</body>
</html>